<template>
  <el-menu
    :default-active="defaultActive"
    unique-opened
    @select="menuSelect"
  >
    <el-menu-item
      v-for="item in tableData"
      :key="item.groupId"
      :index="item.groupId.toString()"
    >
      <div slot="title" style="display: flex;flex-direction: column;justify-content: center;height: 100%;line-height: initial;">
        <div style="display: flex;align-items: center;">
          <span class="fs16 singleLineEllipsis">{{ item.title || '未命名对话' }}</span>
          <el-badge :value="item.readCount" :hidden="!item.readCount" :max="99">
            <span class="fs13" style="color: rgba(0, 0, 0, 0.6);">{{ sendTime(item) }}</span>
          </el-badge>
        </div>
        <span style="color: rgba(0,0,0,0.6);" class="singleLineEllipsis">
          {{ item.latestMessage[item.latestMessage.userType].userName }}：
          {{ item.latestMessage | sendMessage }}
        </span>
      </div>
    </el-menu-item>
  </el-menu>
</template>
<script>
import { chatGroup } from '../utils/request'
import { mapGetters } from 'vuex'
export default {
  filters: {
    changeTime(value) {
      let string = ''
      if (value) {
        const timestamp = Date.parse(new Date())
        const resetTime = (timestamp - value) / 1000 // 当下时间 - 传入的时间 = 剩余秒数
        if (resetTime < 60) { // 小于1分钟
          string = `${resetTime}秒前`
        } else if (resetTime < 3600) { // 小于60分钟
          string = `${parseInt(resetTime / 60)}分钟前`
        } else if (resetTime < 86400) { // 小于24小时
          string = `${parseInt(resetTime / 3600)}小时前`
        } else if (resetTime < 259200) { // 小于3天
          string = `${parseInt(resetTime / 86400)}天前`
        } else {
          var date = new Date(value + 8 * 3600 * 1000) // 增加8小时
          date = date.toJSON().substr(2, 9).replace('T', ' ')
          date = date.replace(/[-]/g, '/')
          string = date
        }
      }
      return string
    },
    sendMessage(val) {
      switch (val.messageType) {
        case 'text': return val.content
        case 'goods': return '商品链接'
        case 'order': return '订单信息'
      }
    }
  },
  props: {
    defaultActive: {
      type: [String, Number],
      default: ''
    },
    defaultChat: {
      type: [Object, String],
      default: () => {}
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  computed: {
    ...mapGetters(['id'])
  },
  created() {
    this.getList()
  },
  methods: {
    // 消息发送时间文本
    sendTime(item) {
      // js中使用过滤器
      return this.$options.filters['changeTime'](item.latestMessage.createTime || item.createTime)
    },
    // 点击聊天列表回调
    menuSelect(index) {
      this.$emit('update:defaultActive', index)
      // eslint-disable-next-line eqeqeq
      this.$emit('update:defaultChat', this.tableData[this.tableData.findIndex(item => item.groupId == index)])
      this.$nextTick(() => {
        console.log(this.defaultActive, '当前激活菜单的')
      })
    },
    // 初始化
    async getList() {
      const { code, data } = await chatGroup({ id: this.id, userType: 'admin' })
      if (code === 0) {
        this.tableData = data
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
